<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guide</title>
    #required_css
    <link rel="stylesheet" href="$!basePath/app/docs.css">
</head>
<body>
<div class="container bs-docs-container">
    <div class="row">
        <div class="col-md-12" role="main">
            <div class="bs-docs-section">
                <h1 class="page-header">按钮组</h1>
                <p class="lead">通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为</p>

                <h2>基本实例</h2>
                <div class="bs-example">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Middle</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="btn-group" role="group"&gt;
                          &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
                          &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
                          &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>

                <h2>按钮工具栏</h2>
                <p>把一组 <code>&lt;div class="btn-group"&gt;</code> 组合进一个 <code>&lt;div class="btn-toolbar"&gt;</code> 中就可以做成更复杂的组件。</p>
                <div class="bs-example">
                    <div class="btn-toolbar">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default">1</button>
                            <button type="button" class="btn btn-default">2</button>
                            <button type="button" class="btn btn-default">3</button>
                        </div>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default">4</button>
                            <button type="button" class="btn btn-default">5</button>
                            <button type="button" class="btn btn-default">6</button>
                            <button type="button" class="btn btn-default">7</button>
                        </div>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default">8</button>
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="btn-toolbar"&gt;
                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default"&gt;1&lt;/button&gt;
                                &lt;button type="button" class="btn btn-default"&gt;2&lt;/button&gt;
                                &lt;button type="button" class="btn btn-default"&gt;3&lt;/button&gt;
                            &lt;/div&gt;
                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default"&gt;4&lt;/button&gt;
                                &lt;button type="button" class="btn btn-default"&gt;5&lt;/button&gt;
                                &lt;button type="button" class="btn btn-default"&gt;6&lt;/button&gt;
                                &lt;button type="button" class="btn btn-default"&gt;7&lt;/button&gt;
                            &lt;/div&gt;
                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default"&gt;8&lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>

                <h2>不同尺寸</h2>
                <p>只要给 <code>.btn-group</code> 加上 <code>.btn-group-*</code> 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。</p>
                <div class="bs-example">
                    <div class="btn-group btn-group-lg" role="group">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Middle</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                    <br>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Middle</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                    <br>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Middle</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                    <br>
                    <div class="btn-group btn-group-xs" role="group">
                        <button type="button" class="btn btn-default">Left</button>
                        <button type="button" class="btn btn-default">Middle</button>
                        <button type="button" class="btn btn-default">Right</button>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="btn-group btn-group-lg" role="group"&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group" role="group"&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group btn-group-sm" role="group"&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
                        &lt;/div&gt;
                        &lt;div class="btn-group btn-group-xs" role="group"&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>

                <h2>嵌套</h2>
                <p>想要把下拉菜单混合到一系列按钮中，只须把 <code>.btn-group</code> 放入另一个 <code>.btn-group</code> 中。</p>
                <div class="bs-example">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default">1</button>
                        <button type="button" class="btn btn-default">2</button>

                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Dropdown link</a></li>
                                <li><a href="#">Dropdown link</a></li>
                            </ul>
                        </div>

                        <button type="button" class="btn btn-default">3</button>
                        <button type="button" class="btn btn-default">4</button>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="btn-group" role="group"&gt;
                            &lt;button type="button" class="btn btn-default"&gt;1&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;2&lt;/button&gt;

                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                    Dropdown
                                    &lt;span class="caret"&gt;&lt;/span&gt;
                                &lt;/button&gt;
                                &lt;ul class="dropdown-menu"&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>

                <h2>垂直排列</h2>
                <p>让一组按钮垂直堆叠排列显示而不是水平排列。<code>分列式按钮下拉菜单不支持这种方式</code>。</p>
                <div class="bs-example">
                    <div class="btn-group-vertical" role="group">
                        <button type="button" class="btn btn-default">1</button>
                        <button type="button" class="btn btn-default">2</button>

                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Dropdown link</a></li>
                                <li><a href="#">Dropdown link</a></li>
                            </ul>
                        </div>

                        <button type="button" class="btn btn-default">3</button>
                        <button type="button" class="btn btn-default">4</button>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Dropdown link</a></li>
                                <li><a href="#">Dropdown link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="btn-group-vertical" role="group"&gt;
                            &lt;button type="button" class="btn btn-default"&gt;1&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;2&lt;/button&gt;

                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                    Dropdown
                                    &lt;span class="caret"&gt;&lt;/span&gt;
                                &lt;/button&gt;
                                &lt;ul class="dropdown-menu"&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/div&gt;

                            &lt;button type="button" class="btn btn-default"&gt;3&lt;/button&gt;
                            &lt;button type="button" class="btn btn-default"&gt;4&lt;/button&gt;
                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                    Dropdown
                                    &lt;span class="caret"&gt;&lt;/span&gt;
                                &lt;/button&gt;
                                &lt;ul class="dropdown-menu"&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>

                <h2>两端对齐排列</h2>
                <p>只须将一系列 <code>.btn</code> 元素包裹到 <code>.btn-group.btn-group-justified</code> 中即可。</p>
                <div class="bs-example">
                    <h3><code>&lt;a&gt;</code>标签</h3>
                    <div class="btn-group btn-group-justified" role="group">
                        <a href="#" class="btn btn-default">Left</a>
                        <a href="#" class="btn btn-default">Middle</a>
                        <a href="#" class="btn btn-default">Right</a>
                    </div>
                    <h3><code>&lt;button&gt;</code>标签</h3>
                    <div class="btn-group btn-group-justified" role="group">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default">Left</button>
                        </div>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default">Middle</button>
                        </div>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-default">Right</button>
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;!--&lt;a&gt;标签--&gt;
                        &lt;div class="btn-group btn-group-justified" role="group"&gt;
                            &lt;a href="#" class="btn btn-default"&gt;Left&lt;/a&gt;
                            &lt;a href="#" class="btn btn-default"&gt;Middle&lt;/a&gt;
                            &lt;a href="#" class="btn btn-default"&gt;Right&lt;/a&gt;
                        &lt;/div&gt;
                        &lt;!--&lt;button&gt;标签--&gt;
                        &lt;div class="btn-group btn-group-justified" role="group"&gt;
                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
                            &lt;/div&gt;
                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
                            &lt;/div&gt;
                            &lt;div class="btn-group" role="group"&gt;
                                &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>
            </div>
        </div>
    </div>
</div>
</body>
#required_js
<script type="text/javascript" src="$!basePath/app/docs.js"></script>
</html>